<script>
import MyChart from "@/components/show_data/MyChart.vue";
export default {
  name: "CityPfShow",
  components: {MyChart},
  data(){
    return{
      option:{
        title: {
          text: '城市票房',
          subtext: '(万元)',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '票房(万元)',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }     //引入饼图结构
    }
  },
  created() {
    this.getCityPf();
  },
  methods:{
    getCityPf(){
      const _this = this;
      this.$http.get('citys/city_pf').then((res)=>{
          var city_pf_list = res.data.data;
          var new_data = [];
          for( var i=0;i<city_pf_list.length;i++){
              var city = city_pf_list[i].city;
              var pf = city_pf_list[i].piaofang;
              var city_pf = {
                value: pf,
                name: city
              }
            new_data[i] = city_pf;
          }
        _this.option.series[0].data = new_data;
      })
    }
  }
}
</script>

<template>
  <MyChart :key1="option" width2="500"/>
</template>

<style scoped>

</style>